<template>
  <div class="page-add-user">
    <ul class="tab-list">
      <li class="tab" @click="changeType(0)" :class="{active: type === 0}">基本信息</li>
      <li class="tab" @click="changeType(1)" :class="{active: type === 1}">父母信息</li>
      <!--<li class="tab" @click="changeType(2)" :class="{active: type === 2}">检测报告</li>-->
    </ul>
    <swiper class="content-list" :current="type" @change="changeSwiper">
      <swiper-item>
        <scroll-view scroll-y class="content">
          <div class="info-wrap">
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/wechat.png">
                <span class="require">*</span>
                所属微信号
              </div>
              <picker mode="selector" :range="phoneList" range-key="wechat" @change="bindOwnerWechatChange" :value="dataForm.ownerWechat">
                <div class="picker date" :class="dataForm.ownerWechat ? '':'disabled'">
                  {{dataForm.ownerWechat ? dataForm.ownerWechat :
                  '点击选择'}}
                </div>
              </picker>
              <img class="btn-right" src="/static/images/common/right.png">
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/real-name.png">
                <span class="require">*</span>
                姓名
              </div>
              <input type="number" v-model="dataForm.realName" placeholder="请填写姓名"/>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/mobile.png">
                <span class="require">*</span>
                手机号
              </div>
              <input type="number" v-model="dataForm.mobile" placeholder="请填写手机号"/>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/wechat.png">
                <span class="require">*</span>
                微信号
              </div>
              <input type="number" v-model="dataForm.wechatNo" placeholder="请填写微信号"/>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/qq.png">
                QQ号
              </div>
              <input type="number" v-model="dataForm.qqNo" placeholder="请填写QQ号"/>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/sex.png">
                <span class="require">*</span>
                性别
              </div>
              <radio-group class="radio-group" @change="changeSex">
                <label class="radio">
                  <radio :value="1" color="#44BDF5" :checked="dataForm.sex === 1"/>
                  <span class="label">男</span>
                </label>
                <label class="radio">
                  <radio :value="2" color="#44BDF5" :checked="dataForm.sex === 2"/>
                  <span class="label">女</span>
                </label>
              </radio-group>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/birth.png">
                <span class="require">*</span>
                出生日期
              </div>
              <picker mode="date" @change="bindDateChange" :value="dataForm.birthday">
                <div class="picker date" :class="dataForm.bornYear ? '':'disabled'">
                  {{dataForm.bornYear ? dataForm.bornYear + "-" + dataForm.bornMonth + "-" + dataForm.bornDate :
                  "点击选择"}}
                </div>
              </picker>
              <img class="btn-right" src="/static/images/common/right.png">
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/height.png">
                <span class="require">*</span>
                目前身高
              </div>
              <input type="number" v-model="dataForm.height" placeholder="请填写目前身高"/>
              <div class="unit">CM</div>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/expectHeight.png">
                <span class="require">*</span>
                期望身高
              </div>
              <input type="number" v-model="dataForm.expectHeight" placeholder="请填写期望身高"/>
              <div class="unit">CM</div>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/weight.png">
                <span class="require">*</span>
                目前体重
              </div>
              <input type="number" v-model="dataForm.weight" placeholder="请填写目前体重"/>
              <div class="unit">KG</div>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/abroadAddress.png">
                <span class="require">*</span>
                是否国外地址
              </div>
              <radio-group class="radio-group" @change="abortAddressChange">
                <label class="radio">
                  <radio :value="0" color="#44BDF5" :checked="dataForm.abroadAddress === 0"/>
                  <span class="label">否</span>
                </label>
                <label class="radio">
                  <radio :value="1" color="#44BDF5" :checked="dataForm.abroadAddress === 1"/>
                  <span class="label">是</span>
                </label>
              </radio-group>
            </div>
            <template v-if="dataForm.abroadAddress === 0">
              <div class="info-item">
                <div class="info-name">
                  <img src="/static/images/user/address.png">
                  <span class="require">*</span>
                  省份
                </div>
                <picker mode="selector" :range="provinceList" range-key="regionName" @change="changeProvince"
                        :value="dataForm.provinceId">
                  <input class="select" disabled v-model="dataForm.provinceName" placeholder="请选择省份"/>
                </picker>
                <img src="/static/images/common/right.png">
              </div>
              <div class="info-item">
                <div class="info-name">
                  <img src="/static/images/user/address.png">
                  <span class="require">*</span>
                  城市</div>
                <picker mode="selector" :range="cityList" range-key="regionName" @change="changeCity" :value="dataForm.cityId">
                  <input class="select" disabled v-model="dataForm.cityName" placeholder="请选择城市"/>
                </picker>
                <img src="/static/images/common/right.png">
              </div>
              <div class="info-item">
                <div class="info-name">
                  <img src="/static/images/user/address.png">
                  <span class="require">*</span>
                  区县</div>
                <picker mode="selector" :range="areaList" range-key="regionName" @change="changeArea" :value="dataForm.areaId">
                  <input class="select" disabled v-model="dataForm.areaName" placeholder="请选择区县"/>
                </picker>
                <img src="/static/images/common/right.png">
              </div>
              <div class="info-item">
                <div class="info-name">
                  <img src="/static/images/user/address.png">
                  <span class="require">*</span>
                  街道
                </div>
                <picker mode="selector" :range="streetList" range-key="regionName" @change="changeStreet"
                        :value="dataForm.streetId">
                  <input class="select" disabled v-model="dataForm.streetName" placeholder="请选择街道"/>
                </picker>
                <img src="/static/images/common/right.png">
              </div>
            </template>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/address.png">
                <span class="require">*</span>
                详细地址
              </div>
              <input class="detail" v-model="dataForm.address" placeholder="请输入详细地址"/>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/birth.png">
                <span class="require">*</span>
                用户来源
              </div>
              <picker mode="selector" :range="channelList" range-key="channelName" @change="bindChannelChange" :value="dataForm.channelId">
                <div class="picker date" :class="dataForm.channelName ? '':'disabled'">
                  {{dataForm.channelName ? dataForm.channelName :
                  '点击选择'}}
                </div>
              </picker>
              <img class="btn-right" src="/static/images/common/right.png">
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/birth.png">
                <span class="require">*</span>
                进线日期
              </div>
              <picker mode="date" @change="bindIntoLineDateChange" :value="dataForm.intoLineDate">
                <div class="picker date" :class="dataForm.intoLineDate ? '':'disabled'">
                  {{dataForm.intoLineDate ? dataForm.intoLineDate :
                  "点击选择"}}
                </div>
              </picker>
              <img class="btn-right" src="/static/images/common/right.png">
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/userTag.png">
                用户标签
              </div>
              <picker mode="selector" :range="userTagList" range-key="name"  @change="bindUserTagChange" :value="dataForm.userTag">
                <div class="picker date" :class="dataForm.userTagName ? '':'disabled'">
                  {{dataForm.userTagName ? dataForm.userTagName :
                  "点击选择"}}
                </div>
              </picker>
              <img class="btn-right" src="/static/images/common/right.png">
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/userTagLevel.png">
                标签等级
              </div>
              <picker mode="selector" :range="userTagLevelList" range-key="name" @change="bindTagLevelChange" :value="dataForm.userTagLevel">
                <div class="picker date" :class="dataForm.userTagLevelName ? '':'disabled'">
                  {{dataForm.userTagLevelName ? dataForm.userTagLevelName :
                  '点击选择'}}
                </div>
              </picker>
              <img class="btn-right" src="/static/images/common/right.png">
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/is-remind.png">
                是否提醒
              </div>
              <radio-group class="radio-group" @change="remindChange">
                <label class="radio">
                  <radio :value="1" color="#44BDF5" :checked="dataForm.isRemind === 1"/>
                  <span class="label">是</span>
                </label>
                <label class="radio">
                  <radio :value="0" color="#44BDF5" :checked="dataForm.isRemind === 0"/>
                  <span class="label">否</span>
                </label>
              </radio-group>
            </div>
            <div class="info-item" v-if="dataForm.isRemind === 1">
              <div class="info-name">
                <img src="/static/images/user/remind.png">
                <span class="require">*</span>
                提醒时间
              </div>
              <div class="picker-list">
                <picker mode="date" @change="bindRemindDateChange" :value="dataForm.remindDate">
                  <div class="picker date" :class="dataForm.remindDate ? '':'disabled'">
                    {{dataForm.remindDate ? dataForm.remindDate :
                    "选择日期"}}
                  </div>
                </picker>
                <picker mode="time" @change="bindRemindTimeChange" :value="dataForm.remindTime">
                  <div class="picker date" :class="dataForm.remindTime ? '':'disabled'">
                    {{dataForm.remindTime ? dataForm.remindTime :
                    "选择时间"}}
                  </div>
                </picker>
              </div>
              <!--<img class="btn-right" src="/static/images/common/right.png">-->
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/abroadAddress.png">
                是否置顶
              </div>
              <radio-group class="radio-group" @change="isTopChange">
                <label class="radio">
                  <radio :value="1" color="#44BDF5" :checked="dataForm.isTop === 1"/>
                  <span class="label">是</span>
                </label>
                <label class="radio">
                  <radio :value="0" color="#44BDF5" :checked="dataForm.isTop === 0"/>
                  <span class="label">否</span>
                </label>
              </radio-group>
            </div>
          </div>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y class="content">
          <div class="info-wrap">
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/real-name.png">
                父亲姓名
              </div>
              <input type="number" v-model="dataForm.fatherName" placeholder="请填写父亲姓名"/>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/mobile.png">
                父亲手机号
              </div>
              <input type="number" v-model="dataForm.fatherMobile" placeholder="请填写父亲手机号"/>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/height.png">
                父亲身高
              </div>
              <input type="number" v-model="dataForm.fatherHeight" placeholder="请填写父亲身高"/>
              <div class="unit">CM</div>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/birth.png">
                父亲出生日期
              </div>
              <picker mode="date" @change="bindFatherBirthdayChange" :value="dataForm.fatherBirthday">
                <div class="picker date" :class="dataForm.fatherBornYear ? '':'disabled'">
                  {{dataForm.fatherBornYear ? dataForm.fatherBornYear + "-" + dataForm.fatherBornMonth + "-" + dataForm.fatherBornDate :
                  "点击选择"}}
                </div>
              </picker>
              <img class="btn-right" src="/static/images/common/right.png">
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/real-name.png">
                母亲姓名
              </div>
              <input type="number" v-model="dataForm.motherName" placeholder="请填写母亲姓名"/>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/mobile.png">
                母亲手机号
              </div>
              <input type="number" v-model="dataForm.motherMobile" placeholder="请填写母亲手机号"/>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/height.png">
                母亲身高
              </div>
              <input type="number" v-model="dataForm.motherHeight" placeholder="请填写母亲身高"/>
              <div class="unit">CM</div>
            </div>
            <div class="info-item">
              <div class="info-name">
                <img src="/static/images/user/birth.png">
                母亲出生日期
              </div>
              <picker mode="date" @change="bindMotherBirthdayChange" :value="dataForm.motherBirthday">
                <div class="picker date" :class="dataForm.motherBornYear ? '':'disabled'">
                  {{dataForm.motherBornYear ? dataForm.motherBornYear + "-" + dataForm.motherBornMonth + "-" + dataForm.motherBornDate :
                  "点击选择"}}
                </div>
              </picker>
              <img class="btn-right" src="/static/images/common/right.png">
            </div>
          </div>
        </scroll-view>
      </swiper-item>
    </swiper>
    <div class="btn-submit" @click="save">确定提交</div>
  </div>
</template>

<script>
  import config from 'config'
  import _ from 'lodash'
  export default {
    data() {
      return {
        type: 0,
        provinceList: [],
        cityList: [],
        areaList: [],
        streetList: [],
        dataForm: {
          channelName: '',
          abroadAddress: 0,
          intoLineDate: '',
          isRemind: 0,
          isTop: 0,
          remindDate: '',
          remindTime: '',
          ownerWechat: '',
          userTagName: '',
          userTagLevelName: '',
          bornYear: '',
          bornMonth: '',
          bornDay: '',
          provinceName: '',
          cityName: '',
          areaName: '',
          streetName: '',
          fatherBornYear: '',
          fatherBornMonth: '',
          fatherBornDate: '',
          motherBornYear: '',
          motherBornMonth: '',
          motherBornDate: '',
        },
        channelList: [],
        phoneList: [],
        userTagList: config.userTagList,
        userTagLevelList: config.userTagLevelList
      };
    },
    components: {},
    methods: {
      async changeProvince(e) {
        const data = this.provinceList[ e.mp.detail.value ];
        this.dataForm.provinceId = data.regionId;
        this.dataForm.provinceName = data.shortName;
        const cityListResult = await wx.request({
          url: '/region/getChildRegions',
          data: {
            regionId: this.dataForm.provinceId,
          }
        })
        if (cityListResult.code === 200) {
          this.cityList = cityListResult.data;
        }
      },
      async changeCity(e) {
        const data = this.cityList[ e.mp.detail.value ];
        this.dataForm.cityId = data.regionId;
        this.dataForm.cityName = data.shortName;
        const areaResult = await wx.request({
          url: '/region/getChildRegions',
          data: {
            regionId: this.dataForm.cityId,
          }
        })
        if (areaResult.code === 200) {
          this.areaList = areaResult.data;
        }
      },
      async changeArea(e) {
        const data = this.areaList[ e.mp.detail.value ];
        this.dataForm.areaId = data.regionId;
        this.dataForm.areaName = data.shortName;
        const streetResult = await wx.request({
          url: '/region/getChildRegions',
          data: {
            regionId: this.dataForm.areaId,
          }
        })
        if (streetResult.code === 200) {
          streetResult.data.shift({
            regionId: 0,
            shortName: '暂无'
          })
          this.streetList = streetResult.data;
        }
      },
      async changeStreet(e) {
        const data = this.streetList[ e.mp.detail.value ];
        this.dataForm.streetId = data.regionId;
        this.dataForm.streetName = data.shortName;
      },
      async save(){
        if(!this.dataForm.ownerWechat){
          wx.showToast('请选择所属微信号')
          return false;
        }
        if(!this.dataForm.realName){
          wx.showToast('请填写姓名')
          return false;
        }
        if(!this.dataForm.mobile){
          wx.showToast('请填写手机号')
          return false;
        }
        if(!this.dataForm.wechatNo){
          wx.showToast('请填写微信号')
          return false;
        }
        if(!this.dataForm.sex){
          wx.showToast('请选择性别')
          return false;
        }
        if(!this.dataForm.bornYear){
          wx.showToast('请选择出生日期')
          return false;
        }
        if(!this.dataForm.height){
          wx.showToast('请填写目前身高')
          return false;
        }
        if(!this.dataForm.expectHeight){
          wx.showToast('请填写期望身高')
          return false;
        }
        if(!this.dataForm.weight){
          wx.showToast('请填写目前体重')
          return false;
        }
        if(!this.dataForm.address){
          wx.showToast('请填写联系地址')
          return false;
        }
        if(!this.dataForm.weight){
          wx.showToast('请填写目前体重')
          return false;
        }
        if(!this.dataForm.channelId){
          wx.showToast('请选择用户来源')
          return false;
        }
        if(this.dataForm.abroadAddress === 0){
          if (!this.dataForm.provinceName) {
            wx.showToast({
              title: '请选择省份',
              icon: 'none'
            })
            return false;
          }
          if (!this.dataForm.cityName) {
            wx.showToast({
              title: '请选择城市',
              icon: 'none'
            })
            return false;
          }
          if (!this.dataForm.areaName) {
            wx.showToast({
              title: '请选择区县',
              icon: 'none'
            })
            return false;
          }
        }
        if (!this.dataForm.address) {
          wx.showToast({
            title: '请输入收货人详细地址',
            icon: 'none'
          })
          return false;
        }
        if(!this.dataForm.intoLineDate){
          wx.showToast('请选择进线日期')
          return false;
        }
        if(!this.dataForm.channelId){
          wx.showToast('请选择用户来源')
          return false;
        }
        this.dataForm.bmi = parseFloat(this.dataForm.weight/(this.dataForm.height*this.dataForm.height/10000)).toFixed(1);
        const remindTime = new Date();
        if(this.dataForm.remindDate && this.dataForm.remindTime){
          const dateArr = this.dataForm.remindDate.split('-');
          remindTime.setFullYear(dateArr[0])
          remindTime.setMonth(dateArr[1]-1)
          remindTime.setDate(dateArr[2])
          const timeArr = this.dataForm.remindTime.split(':');
          remindTime.setHours(timeArr[0])
          remindTime.setMinutes(timeArr[1])
        }
        const params = _.cloneDeep(this.dataForm);
        params.remindTime = remindTime.getTime();
        const result = await wx.request({
          method: 'POST',
          url: this.id ? '/bg/userInfo/modify' : '/bg/userInfo/add',
          data: params
        });
        if (result.code === 200) {
          wx.showModal({
            content: '保存成功',
            showCancel: false,
            success: result => {
              if(result.confirm){
                wx.navigateBack();
              }
            }
          });
        }else{
          wx.showToast(result.message)
        }
      },
      bindOwnerWechatChange(e){
        const phone = this.phoneList[e.mp.detail.value];
        this.dataForm.ownerWechat = phone.wechat;
      },
      bindTagLevelChange(e){
        const userTagLevel = this.userTagLevelList[e.mp.detail.value];
        this.dataForm.userTagLevel = userTagLevel.id;
        this.dataForm.userTagLevelName = userTagLevel.name;
      },
      bindUserTagChange(e){
        const userTag = this.userTagList[e.mp.detail.value];
        this.dataForm.userTag = userTag.id;
        this.dataForm.userTagName = userTag.name;
      },
      isTopChange(e){
        this.dataForm.isTop = parseInt(e.mp.detail.value);
      },
      remindChange(e){
        this.dataForm.isRemind = parseInt(e.mp.detail.value);
      },
      bindRemindDateChange(e){
        this.dataForm.remindDate = e.mp.detail.value;
      },
      bindRemindTimeChange(e){
        this.dataForm.remindTime = e.mp.detail.value;
      },
      bindIntoLineDateChange(e){
        this.dataForm.intoLineDate = e.mp.detail.value;
      },
      bindChannelChange(e){
        const channel = this.channelList[e.mp.detail.value];
        this.dataForm.channelId = channel.id;
        this.dataForm.channelName = channel.channelName;
      },
      abortAddressChange(e) {
        this.dataForm.abroadAddress = parseInt(e.mp.detail.value);
      },
      changeSwiper(e) {
        this.type = e.mp.detail.current;
      },
      changeType(type) {
        this.type = type;
      },
      changeSex(e) {
        this.dataForm.sex = parseInt(e.mp.detail.value);
      },
      bindDateChange(e) {
        const dateArray = e.mp.detail.value.split("-").map(data => {
          return parseInt(data);
        });
        this.dataForm.bornYear = dateArray[ 0 ];
        this.dataForm.bornMonth = dateArray[ 1 ];
        this.dataForm.bornDate = dateArray[ 2 ];
      },
      bindFatherBirthdayChange(e){
        const dateArray = e.mp.detail.value.split("-").map(data => {
          return parseInt(data);
        });
        this.dataForm.fatherBornYear = dateArray[ 0 ];
        this.dataForm.fatherBornMonth = dateArray[ 1 ];
        this.dataForm.fatherBornDate = dateArray[ 2 ];
      },
      bindMotherBirthdayChange(e){
        const dateArray = e.mp.detail.value.split("-").map(data => {
          return parseInt(data);
        });
        this.dataForm.motherBornYear = dateArray[ 0 ];
        this.dataForm.motherBornMonth = dateArray[ 1 ];
        this.dataForm.motherBornDate = dateArray[ 2 ];
      },
      async loadChannel() {
        const result = await wx.request({
          url: '/bg/regChannel/listPage',
          data: {
            page: 1,
            pageSize: 50
          }
        });
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            list.push(_.pick(data, [ 'id', 'channelName' ]));
          });
          this.channelList = list;
        } else {
          wx.showToast(result.message);
        }
      },
      async loadPhone(){
        const result = await wx.request({
          url: '/bg/phone-info/listPage',
          data: {
            userId: App.loginInfo && App.loginInfo.userId,
            page: 1,
            pageSize: 50,
          }
        });
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            list.push(_.pick(data, [ 'wechat' ]));
          });
          this.phoneList = list;
        } else {
          wx.showToast(result.message);
        }
      }
    },
    async mounted() {
      await this.loadChannel();
      this.loadPhone();
      this.id = this.$root.$mp.query.id;
      if(this.id){
        wx.setNavigationBarTitle({
          title: '修改用户信息'
        })
        const result = await wx.request({
          url: `/bg/userInfo/detail/${this.id}`
        });
        if (result.code === 200) {
          this.dataForm = result.data;
          this.dataForm.userTagName = this.userTagList[this.dataForm.userTag].name;
          this.dataForm.userTagLevelName = this.userTagLevelList[this.dataForm.userTagLevel].name;
        }else{
          wx.showToast(result.message)
        }
      }
      const provinceResult = await wx.request({
        url: '/region/getTopRegions'
      })
      if (provinceResult.code === 200) {
        this.provinceList = provinceResult.data;
      }
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .page-add-user {
    .content-list {
      height: 100vh;
      .content {
        padding-top: pxToRem(88);
        padding-bottom: pxToRem(160);
        height: 100vh;
        box-sizing: border-box;
      }
    }
    .tab-list {
      @include middle-center-x();
      top: 0;
      width: pxToRem(750);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 pxToRem(4) pxToRem(6) 0 rgba(204, 204, 204, 0.5);
      z-index: 1000;
      .tab {
        flex: 1;
        padding-top: pxToRem(22);
        padding-bottom: pxToRem(22);
        color: #707070;
        font-size: pxToRem(32);
        line-height: pxToRem(44);
        text-align: center;
        &.active {
          color: #44BDF5;
        }
      }
    }
    .info-wrap {
      padding-left: pxToRem(40);
      padding-right: pxToRem(40);
      .info-item {
        position: relative;
        border-bottom: pxToRem(1) solid rgba(68, 189, 245, 0.3);
        min-height: pxToRem(112);
        .info-name {
          display: flex;
          align-items: center;
          @include middle-center-y();
          left: 0;
          font-size: pxToRem(28);
          img {
            margin-right: pxToRem(20);
            width: pxToRem(28);
            height: pxToRem(28);
          }
          .require {
            color: #D0021B;
          }
        }
        .unit, .btn-right {
          @include middle-center-y();
          right: 0;
          color: #9B9B9B;
          font-size: pxToRem(28);
        }
        .btn-right {
          width: pxToRem(14);
          height: pxToRem(26);
        }
        input, .radio-group, .picker {
          padding: 0 pxToRem(30) 0 pxToRem(300);
          font-size: pxToRem(28);
          line-height: pxToRem(112);
          box-sizing: border-box;
          height: pxToRem(112);
          &::-webkit-input-placeholder {
            color: #9B9B9B;
          }
          &.select {
            color: #4a4a4a;
          }
        }
        .picker-list {
          display: flex;
          align-items: center;
          padding-left: pxToRem(300);
          width: 100%;
          box-sizing: border-box;
          .picker {
            flex: 1;
            padding-left: 0;
            line-height: pxToRem(112);
            box-sizing: border-box;
            height: pxToRem(112);
            font-size: pxToRem(28);
          }
        }
        .disabled {
          color: #707070;
        }
        .radio {
          margin-right: pxToRem(50);
          font-size: pxToRem(28);
          .label {
            margin-left: pxToRem(5);
            font-size: pxToRem(28);
          }
        }
      }
    }
    .btn-submit {
      @include middle-center-x();
      bottom: pxToRem(40);
      width: pxToRem(444);
      height: pxToRem(88);
      line-height: pxToRem(88);
      text-align: center;
      font-size: pxToRem(40);
      color: #fff;
      background:linear-gradient(90deg,rgba(117,228,252,1) 0%,rgba(68,189,245,1) 100%);
      border-radius: pxToRem(8);
    }
  }
</style>
